<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>上架</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="../css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="../css/1px.css" />
    <link rel="stylesheet" type="text/css" href="../css/weui.min.css" />
    <link rel="stylesheet" href="../css/mui.picker.css" />
    <link rel="stylesheet" href="../css/mui.poppicker.css" />
    <link rel="stylesheet" href="../css/common.css" />
    <style type="text/css">
      html {
        font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
      }
      
      body {
        background-color: #fff !important;
      }
      
      #app {
        font-size: 14px;
        box-sizing: border-box;
      }
      
      .empty {
        text-align: center;
        margin-top: 50px;
        color: #999;
        font-size: 12px;
      }
      
      .machine-section {
        padding: 10px 0;
        color: #000;
        text-align: center;
      }
      
      .goods-item div {
        align-items: center;
      }
      
      .goods-item__top {
        padding-top: 10px;
      }
      
      .img-wrapper {
        flex: 0 1 90px;
        text-align: center;
        position: relative;
      }
      .goods-id{
      	position: absolute;
      	width: 100%;
      	text-align: center;
      	font-size: 13px;
      	left: 0;
      	bottom: 0;
      }
      .goods-id .id{
      	display: inline-block;
      	background-color: rgba(52, 52, 52, .5);
      	color: #FFFFFF;
      	width: 70px;
      	margin: auto auto;
      }
      .goods-info {
        overflow: hidden;
      }
      
      .goods-info div {
        margin: 3px 0;
      }
      
      .goods-info-right {
        flex: 0 1 120px;
        text-align: center;
        overflow: hidden;
      }
      
      .goods-info-right div {
        margin: 3px 0;
      }
      
      .goods-item__bottom {
        padding-bottom: 5px;
      }
      
      .goods-item_total {
        padding-left: 10px;
      }
      
      .goods-item_op {
        flex: 0 1 120px;
        text-align: center;
      }
      
      .goods-item_op button {
        width: 70%;
      }
      .choose-btn{
      	background-color: #FF9800;
      	border-color: #FF9800
      }
      .choose-btn:active{
      	background-color: #ef9a60;
      }
      .divide {
        padding: 6px;
        text-align: center;
      }
      
      .mui-pull-bottom-pocket {
        visibility: visible;
      }
      
      .mui-pull-bottom-pocket .mui-pull-loading {
        visibility: visible;
      }
      
      .mui-scroll-wrapper {
        margin-top: 80px;
      }
      
      .mui-select {
        width: 80%;
        margin-left: 10%;
        border: 1px solid #C0C0C0;
        border-radius: 6px;
        line-height: 24px;
        font-size: 14px;
        color: #ACACB4;
        text-indent: 6px;
      }
      
      #select-tag {
        /*height: 100%;
      	line-height: 100%;*/
        /*width: 100px;*/
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .mui-select:before {
        top: 2px;
      }
      
      .search {
        margin-bottom: 10px;
      }
      
      .search input {
        padding: 2px 5px;
        margin-bottom: 0px;
        height: 30px;
        width: 80%;
        margin-left: 10%;
        font-size: 13px;
      }
      
      .mask {
        position: absolute;
        z-index: 10;
        width: 100%;
        height: 100%;
        background-color: rgb(255, 255, 255);
        font-size: 18px;
        color: #999;
        text-align: center;
        padding-top: 50px;
      }
    </style>
  </head>

  <body>
    <script src="../js/mui.min.js"></script>
    <script src="../js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
    <div class="machine" id="app">
      <div class="mask" v-show="isInit">加载中...</div>
      <div class="weui-flex" style="padding-top:10px;">
        <div class="weui-flex__item">
          <div id="selsct-type" class="mui-select selsct-type">
            <span v-text="typeText"></span>
          </div>
        </div>
        <div class="weui-flex__item">
          <div id="select-tag" class="mui-select select-tag">
            <span v-text="tagText"></span>
          </div>
        </div>
      </div>

      <div class="weui-flex vux-1px-b" style="padding-top:10px;">
        <div class="weui-flex__item search search-input">
          <input placeholder="请输入礼品名称" type="text" v-model="goodsName">
        </div>
        <div class="weui-flex__item search">
          <button type="button" class="mui-btn mui-btn-success" @click="getSearch" style="padding: 4px 12px;margin-left:10%;">搜索</button>
        </div>
      </div>

      <div class="mui-scroll-wrapper total-scroll-wrapper">
        <div class="mui-scroll goods-list">
          <p class="empty" v-if="goodsList.length === 0">没有符合条件的货品</p>
          <div class="goods-item vux-1px-b" v-for="(item, index) in goodsList" :key="index">
            <div class="weui-flex">
              <div class="weui-flex__item weui-flex" class="goods-item__top" style="padding-top: 10px;">
                <div class="weui-flex__item img-wrapper">
                    <a href="#middlePopover"  class="img-info" :index="index"><img  :src="item.wareGoods.cutImg | fixUrl" style="width: 70px; height:70px;" alt="" /></a>
                		 <p class="goods-id"><span class="id" v-text="item.wareGoods.wareGoodsId"></span></p>
                </div>
                <div class="weui-flex__item goods-info">
                  <div>名称:<span v-text="item.wareGoods.name"></span></div>
                  <div>门店库存:<span v-text="item.shopGoodsAmount.amount"></span></div>
                </div>
              </div>
              <div class="weui-flex__item goods-info-right">
                <button type="button" class="mui-btn mui-btn-primary choose-btn" style="width:100px;" @click="addGoods(item, index)">选择</button>
              </div>
            </div>
          </div>
          <div class="mui-pull-bottom-pocket" v-show="isLoading">
            <div class="mui-pull">
              <div class="mui-pull-loading mui-icon mui-spinner" v-if="hasIcon"></div>
              <div class="mui-pull-caption" v-text="tip"></div>
            </div>
          </div>
        </div>
      </div>
<!--显示附加信息-->
    <div id="middlePopover" class="mui-popover">
      <div class="mui-popover-arrow"></div>
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <p class="fullName">规格：<span></span></p>
          <p class="tags">用途：<span></span></p>
          <p class="score">积分：<span></span></p>
        </div>
      </div>
    </div>
    <!---->
    </div>
    <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../config.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var vm = new Vue({
          el: '#app',
          data: {
            isInit: true,
            machine: {},
            currentShopObj: {},
            pageNo: 1,
            goodsList: [],
            index: '',
            isLoading: false,
            hasIcon: true,
            type: '',
            typeText: '全部尺寸',
            tagText: '全部用途',
            tip: '正在加载...',
            tagIds: [],
            goodsName: '',
            pageTatol:1
          },
          mounted: function() {
          	mui.init();
          	var sf = this
			      mui.plusReady(function() {
				      sf.receiveParams();
	            sf.fixScroll();
	            sf.getTypes();
	            sf.getTag();
	            sf.loadData();
			      });
            document.querySelector('.mui-scroll-wrapper').addEventListener('scrollend', function(e) {
              if(e.detail.y <= e.detail.maxScrollY  && vm.pageTatol >= vm.pageNo) {
                vm.pageNo += 1;
                vm.loadData();
              }
            });
               //显示用途
		        mui('.goods-list').on('tap', '.img-info', function(e) {
		          var ind = this.getAttribute('index')
		          var typeFullName = sf.goodsList[ind].typeFullName
		          var tags = ''
		          sf.goodsList[ind].tags.forEach(function(item) {
		            tags += item.tagDescribe + ' '
		          })
		          document.querySelector(".fullName span").innerText = typeFullName
		          document.querySelector(".tags span").innerText = tags
		          document.querySelector(".score span").innerText = sf.goodsList[ind].wareGoods.score
		        })
          },
          methods: {
            receiveParams: function() {
              var self = plus.webview.currentWebview();
              this.currentShopObj = self.currentShopObj;
              this.index = self.index;
              this.machine = self.reward;
            },
            showInfo: function(item,index) {
            	var tags = ''
		          item.tags.forEach(function(item) {
		            tags += item.tagDescribe + ' '
		          })
		          document.querySelector(".fullName span").innerText = item.typeFullName
		          document.querySelector(".tags span").innerText = tags
		          document.querySelector(".score span").innerText = item.wareGoods.score
            },
            getTypes: function() {
              config.ajax({
                url: '/goodsType/get.do',
                type: 'GET',
                success: function(res) {
                  vm.initPicker(res.data);
                }
              });
            },
            getTag: function() {
              config.ajax({
                url: '/tag/get.do',
                data: {
                  tagDescribe: ''
                },
                success: function(res) {
                  if(res.result === 1) {
                    vm.initTagPicker(res.tags);
                  }
                }
              });
            },
            initTagPicker: function(data) {
              var arr = [];
              data.forEach(function(item) {
                var obj = {
                  text: item.tagDescribe,
                  value: item.tagId
                }
                arr.push(obj);
              });
              arr.unshift({
                text: '全部用途',
                value: ''
              });
              var tagPicker = new mui.PopPicker();
              tagPicker.setData(arr);
              var tagCheck = document.querySelector('#select-tag')
              tagCheck.addEventListener('tap', function(event) {
                tagPicker.show(function(items) {
                  if(items[0].value === '') {
                    vm.tagIds = [];
                    vm.tagText = '全部用途';
                    vm.pageNo = 1;
                    vm.isInit = true;
                    vm.loadData();
                  } else {
                    vm.tagIds = [];
                    vm.tagIds.push(items[0].value);
                    vm.tagText = items[0].text;
                    vm.pageNo = 1;
                    vm.isInit = true;
                    vm.loadData();
                  }
                })
              })
            },
            initPicker: function(data) {
              var arr = [];
              data.forEach(function(item) {
                arr.push(parseData(item));
              });
              arr.unshift({
                text: '全部尺寸',
                value: ''
              });
              var typePicker = new mui.PopPicker({
                layer: 2
              });
              typePicker.setData(arr);
              var typeCheck = mui("#selsct-type")[0];
              typeCheck.addEventListener('tap', function(event) {
                typePicker.show(function(items) {
                  vm.type = items[1].value;
                  vm.typeText = items[1].text ? items[0].text + '/' + items[1].text : items[0].text;
                  vm.pageNo = 1;
                  vm.isInit = true;
                  vm.loadData();
                });
              }, false);

              function parseData(item) {
                var obj = {
                  text: item.name,
                  value: item.id
                }
                if(item.children) {
                  obj.children = [];
                  item.children.forEach(function(innerItem, innerIndex) {
                    obj.children.push(parseData(innerItem));
                  });
                }
                return obj;
              }
            },
            fixScroll: function() {
                mui('.mui-scroll-wrapper').scroll({
                  deceleration: 0.0005,
                  brounce: true,
                  scrollY: true
                });
            },
            getSearch: function() {
            	 mui('.total-scroll-wrapper').scroll().scrollTo(0, 0, 100)
              this.pageNo = 1;
              this.loadData();
            },
            loadData: function() {
              var _this = this;
              if(_this.isLoading) {
                return;
              }
              if(_this.pageNo > 1) {
                _this.isLoading = true;
              }

              config.ajax({
                url: '/shopGoods/checkLike',
                data: {
                  shopId: _this.currentShopObj.storeId,
                  deviceSn: _this.machine.masterSn,
                  pageNo: _this.pageNo,
                  isAmountUpper: true,
                  type: _this.type,
                  tagIds: _this.tagIds,
                  goodsName: _this.goodsName
                },
                success: function(res) {
                  if(res.result === 1) {
                    if(res.pageList.data.length > 0) {
                      setTimeout(function() {
                        if(_this.pageNo === 1) {
                        	_this.pageTatol = res.pageList.pageTatol
                          _this.goodsList = res.pageList.data;
                          _this.isLoading = false;
                          mui('.total-scroll-wrapper').scroll().scrollTo(0, 0, 100)
                        } else {
                          _this.goodsList = _this.goodsList.concat(res.pageList.data);
                          _this.isLoading = false;
                        }
                      }, 400);
                    } else {
                      if(_this.pageNo === 1) {
                        _this.goodsList = [];
                        _this.isLoading = false;
                      } else {
                        setTimeout(function() {
                          _this.tip = '没有更多了';
                          _this.hasIcon = false;
                        }, 400);
                      }
                    }
                  }
                  setTimeout(function() {
                    _this.isInit = false;
                  }, 400)
                }
              });
            },
            fresh: function() {
              var machine = plus.webview.getWebviewById('machine');
              mui.fire(machine, 'fresh', {
                index: vm.index
              });
            },
            addGoods: function(item, index) {
              if(item.shopGoodsAmount.amount > 0) {
                var btnArray = ['取消', '确定'];
                mui.prompt('请输入上架数量：', '', '上架货品' + item.wareGoods.name, btnArray, function(e) {
                  if(e.index == 1) {
                    config.ajax({
                      url: '/shopGoods/bindDevice.do',
                      data: {
                        goodsId: item.wareGoods.wareGoodsId,
                        deviceSn: vm.machine.masterSn,
                        deviceId: vm.machine.masterId,
                        deviceFullName: vm.machine.deviceFullName,
                        deviceShopNumber: vm.machine.storeNumber,
                        amount: e.value,
                        shopId: vm.currentShopObj.storeId
                      },
                      success: function(res) {
                        if(res.result === 1) {
                          plus.nativeUI.toast('操作成功');
                          vm.fresh();
                          vm.goodsList.splice(index, 1);
                        } else {
                          plus.nativeUI.toast(res.errormsg);
                        }
                      }
                    });
                  }
                }, 'div');
                document.querySelector('.mui-popup-input input').type = 'number';
              } else {
                mui.toast('门店库存为0')
              }

            }
          },
          filters: {
            fixUrl: function(val) {
              if(val && val.indexOf('http://') === -1) {
                return config.imgPath + val
              }
              return val
            }
          }
        });
     
    </script>
  </body>

</html>